.home-content.kmi-layout-content{
    background-image: url("../../../../image/smes_v340/backgroung.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: bottom right;
}
.home-content .kmi-header-row{
    flex: 0 0 70px;
    background: linear-gradient(89.97deg, #293F5D 0.65%, #244D85 99.98%);
    color: #fff;
}

.home-content .kmi-header-row .brand-title .custom .gap{
    margin: auto 16px auto 8px;
}

.home-content .kmi-header-row .row-left {
    flex: 1;
}

.home-content .kmi-header-row .row-left .left-text {
    font-style: normal;
    font-weight: bolder;
    font-size: 21px;
    line-height: 50px;
    float: left;
}

.home-content .kmi-header-row .row-right {
    flex:1; 
    padding-right: 16px;
}

.home-content .kmi-header-row .row-right .right-text {
    float:right;
    font-size: 16px;
}

.home-content .smes-logo{    
    height: 70px;
    background: #293F5D;
    min-height: 70px;
    display: flex;
    align-items: center;
}
.home-content .smes-logo .logo{
    margin: 0 0 0 16px;
    display: flex;
}
.home-content .smes-logo .logo img{
    margin: 0 8px 0 0 ;
}
.kmi-header-row .kmi-side-btn{
    top: 6px;
}
.home-content .kmi-header-row .kmi-side-btn.left{
    top: 0px;
}
.home-content .kmi-header-row .header-logo{
    height: 52px;
    width: 168px;
}
.home-content .kmi-header-row .header-pro-logo{
    position: absolute;
    top: 12px;
    left: 0px;
    width: 140px;
    height: 28px;
    background-size: cover;
}
.home-content .kmi-layout-main-content{
    display: flex;
    flex-direction: row;
    background: initial !important;
    box-shadow: none;
    height: 100%;
    margin-right: 0;
}
.home-content .kmi-layout-page.left{
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.5) 100%);
    flex: 0 0 240px;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.home-content .left-menu-item{
    position: relative;
    height: 70px;
    border: none;
    display: flex;
    align-items: center;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin: 16px 0 0 0;
    overflow:hidden;
}
.home-content .left-menu-item:first-child{
    margin: 0 0 0 0;
}
.home-content .left-menu-item:hover{
    /* background: rgba(255, 255, 255, 0.2); */
}
.home-content .left-menu-item .kmi-can-click:hover{
    /* background: none; */
    background: rgba(255, 255, 255, 0.2);
    border-radius: 0px;
}
.home-content .left-menu-item .menu-icon{
    margin: 0 0 0 16px;
}
.home-content .left-menu-item .menu-icon img{
    height: 30px;
    width: 30px;

    box-sizing: border-box;
    /* border-radius: 50%; */
}
.home-content .left-menu-item .menu-title{
    font-size: 18px;
    margin: 0 0 0 18px;
}
.en_US .home-content .left-menu-item .menu-title{
    width: 160px;
}
.home-content .left-menu-item.is-select{
    background: linear-gradient(180deg, #6CAFFF 0%, #2889FE 50%);
    box-shadow: 0px 4px 8px rgba(32, 113, 211, 0.2);
}
.home-content .left-menu-item.is-select .menu-icon{
    /*border-left: 6px solid #f4b04d;
    padding-left:10px;*/
}
.home-content .left-menu-item.is-select .menu-title{
    color: #fff;
}
/*
.home-content .left-menu-item.is-select .menu-icon img{
    border: 2px solid #f4b04e;
    background: #f4b04e;
}
*/
.home-content .left-menu-item.is-select:hover {
    /*background-color: #0aa3b5;*/
    /* background: #ffffff; */
    /*box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);*/
}

.home-content .kmi-layout-page.right{
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex:1;
    overflow: hidden;
    padding: 0;
}
.home-content .kmi-layout-page.right .kmi-header-row .header-login{
    padding: 0 4px;
}
.home-content .kmi-layout-page.right .sub-memu-content{
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    min-height:0px;
    height:0px;
}
.home-content .kmi-layout-page.right .sub-memu-content .click-area{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}
.home-content .kmi-layout-page.right .sub-memu-content .click-area:hover{
    background-color:rgba(99, 169, 221, 0.8);
}
.home-content .kmi-layout-page.right .sub-memu-content.sub-menu-show{
    display: flex;
    overflow: auto;
    min-height: 66px;
    min-width: 500px;
    height:auto;
    padding: 0 0 8px 0;

}
.home-content .kmi-layout-page.right .sub-memu-content-list{
    display: flex;
    flex-direction: column;
    width: 230px;
    overflow: auto;
    min-height: 80px;
    min-width: 230px;
}
/* 報表測試 */
.home-content .kmi-layout-page.right .sub-memu-content-list::-webkit-scrollbar{
     display:none;
}
.home-content .menuItemColumn::-webkit-scrollbar{
    display:none;
}
/* .home-content .kmi-layout-page.right .menu-item{
    position: relative;
    flex: 0 0 227.2px;
    height: 70px;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0 8px 8px 0;
    pad: 0 16px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
} */
.home-content .kmi-layout-page.right .menu-item:hover{
    /* background-color:rgba(99, 169, 221, 0.8); */
    cursor: pointer;
}
.home-content .kmi-layout-page.right .menu-item:hover > span{
    color: white;
}
.home-content .kmi-layout-page.right .menu-item:hover > .arrow{
    color: white;
}
.home-content .program-component .icon.flag{
    border-radius: 4px 0 0 0;
    background: #2889FE;
    width: 16px;
    height: 16px;
    clip-path: polygon(0% 0, 100% 0%, 0 100%, 0 100%);
    align-self: flex-start;
    min-width: 16px;
    position: absolute;
    left: 0px;
}

/* 報表測試 */
.home-content .kmi-layout-page.right .menu-item.menu-item-list{
    flex: 0 0 80px;
}

.home-content .kmi-layout-page.right .menu-item.ng-enter{
    opacity: 0;
}
.home-content .kmi-layout-page.right .menu-item.ng-leave{
    transition: all 0s ease-in-out;
}
.home-content .kmi-layout-page.right .menu-item .menu-icon{
    flex: 0 0 56px;
    width: 68px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    font-weight: 700;
    font-style: normal;
    /* font-size: 28px; */
    font-size: 14px;
    color: #FFFFFF;
}
.home-content .kmi-layout-page.right .menu-item .menu-icon>img{
    height: 24px;
    width: 24px;
    /*border: 0px;*/
}
.home-content .kmi-layout-page.right .menu-item:hover .menu-icon{
    /*box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.2),  0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);*/
}
.home-content .kmi-layout-page.right .menu-item .kmi-can-click:hover{
    background-color:rgba(99, 169, 221, 0.5);
    /* border-radius:16px; */
}

.home-content .kmi-layout-page.right .menu-back{
    /* background: url(../../../../image/button-back.png);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;   */
    position: absolute;
    height: 50px;
    width: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
    opacity: 0.8;
}
.en_US .home-content .kmi-layout-page.right .menu-item .menu-title{
    /* font-size: 17px; */
    font-size: 14px;
}
.home-content .kmi-layout-footer{
    right: 12px;
    bottom: 0px;
}
.home-content .kmi-layout-footer .sub,
.home-content .kmi-layout-footer .sub:active,
.home-content .kmi-layout-footer .sub:focus{
    background: rgb(244,176,77);
}
.home-content .kmi-layout-footer .sub:hover{
    background: rgb(244,176,77);
}
.home-content .kmi-layout-footer .sub:active{
    background: rgb(244,176,77);
}
.home-content .sub-tag-content{
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding: 0 0 0 16px;
}
.home-content .sub-tag-content .sub-tag-title{
    display: flex;
    flex-direction: row;
    cursor: pointer;
    font-size: 15px;
    font-style: normal;
    font-weight: 900;
    line-height: 34px;
    padding: 0 0 8px 0;
}

.home-content .sub-tag-content .sub-tag-title .report-column-title{
    margin-left: 8px;
    line-height: 24px;
}
.home-content .sub-tag-content .sub-tag-title .sub-tag-title_btn{
    /* color:#de98b4; */
    color: black;
}
/*
.home-content .menu-tag.is-select{
    background: linear-gradient(to bottom, rgba(26, 183, 204, 0.9) 0%, rgba(26, 183, 204, 0.4) 100%);
    color: #ffffff;
}
*/
.home-content .kmi-layout-page.right .arrow {
    width: 17px;
    padding-right: 10px;
    left: 16.5px;
    /* border: 1px solid #FFFFFF; */
}

.home-content i.logout-arrow {
    margin-left: 25px;
    color: white;
    transform: rotate(270deg);
}

.home-content .side-menu-item {
    margin: 0 0 0 16px;
    display: flex;
}
.home-content .side-menu-item {
    margin: 0 0 0 16px;
    display: flex;
}

.home-content .bottom-panel{
    /* display: flex;
    flex-direction: column;
    justify-content: flex-end; */
}

.home-content .mdl-button--fab.mdl-button--custom1.sub {
    width:68px;
    height:68px;
}

.home-content .mdl-button>img {
    object-fit: cover;
    width: 36px;
    height: 36px;
}
.home-content .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 70px;
    
    background: linear-gradient(89.97deg, #293F5D 0.65%, #244D85 99.98%);
}
.home-content .title {
    margin: 0 0 0 16px; 
    display: flex;  
    align-items: center;
}
.home-content .title .logo-ch{
    margin: 0 0 0 16px; 
}
.home-content .title .logo-en{
    margin: 0 0 0 10px; 
}
.home-content .tool {
    margin: 0 16px 0 0;   
    display: flex;  
    align-items: center;
}
.home-content .tool .drop{
    margin: 0 32px 0 0;
}
.home-content .tool .search{
    margin: 0 32px 0 0;
}
.home-content .tool .setting{
    margin: 0 16px 0 0;
}
.home-content .background{
    position: absolute;
    right: 0px;
    bottom: 0px;
}
.home-content .animation .yellow-paint{
    position: fixed;
    width: 286px;
    height: 286px;
    left: 40%;
    background: rgba(255, 178, 65, 0.4);
    filter: blur(200px);
    bottom: -143px;
}
.home-content .animation .blue-paint{
    position: fixed;
    width: 412px;
    height: 412px;
    left: 70%;
    bottom: -206px;
    background: rgba(106, 174, 255, 0.4);
    filter: blur(200px);
}
.home-content .program-list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
/* empty-page */
.home-content .empty-page {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.home-content .empty-page .title {
    font-size: 18px;
    line-height: 50px;
}
.home-content .empty-page .add-btn {
    position: absolute;
    right: 0px;
    bottom: 16px;
    background: #ffb037;
    width: 70px;
    height: 70px;
    box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.3);
    border-radius: 8px 0px 0px 8px;
    border: none;
}
/* main-page */
.home-content .main-page {
    padding: 0 0 16px 16px;    
    overflow: auto;
}
.home-content .main-page .catrgory-list {
    display: flex;
    flex-direction: column;
}
.home-content .main-page .module-title {
    margin: 16px 0 0 0;
}
.home-content .program-component {
    width: 250px;
    height: 70px;
    margin: 8px 8px 0 0;
    
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    position: relative;
}
.home-content .program-component .icon > img{
    width: 32px;
    height: 32px;
}
.home-content .program-component .title{
    display: block;
    margin: 0 0 0 8px;
    width: 100%;

    font-size: 18px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    line-height: initial;
}
.home-content .program-component .option{
    margin: 0 0 0 8px;
}
.home-content .edit-btn {
    position: absolute;
    right: 0px;
    bottom: 16px;
    background: #fff;
    width: 70px;
    height: 70px;
    box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.3);
    border-radius: 8px 0px 0px 8px;
    border: none;
}

.home-content .program-list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
.home-content .add-page .menu-panel .program-component {
    width: 250px;
    height: 50px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    border: 1px solid #ececec;
    margin: 0 8px 8px 0;
}
.home-content .sub-tag-content .sub-tag-title .report-column-title,
.home-content .module .module-title {
    font-weight: 700;
    font-size: 20px;
    line-height: 50px;
    margin: 16px 0 0 0;
}
.home-content .no-sub-tag-margin {
    margin: 16px 0 0 0;
}

.fixed-background{
    position: fixed;
    width: calc(100% - 240px);
    height: calc(100% - 70px);
    right: 0;
    bottom: 0;
}
.animation-content{
    position: relative;
    width: 100%;
    height: 100%;
}
.orange-blur{
    position: absolute;
    bottom: 0;    
    left: calc(50% - 343px);

    opacity: 0;
    animation: orange-move 300ms ease-out 800ms 1 normal forwards;
} 
.blue-blur{
    position: absolute;
    right: 0;
    bottom: 0;

    opacity: 0;
    animation: blue-move 300ms ease-out 800ms 1 normal forwards;
}
@keyframes orange-move {
    0% { bottom: -386px; opacity: 1;}
    100% { bottom: 0; opacity: 1;}
}
@keyframes blue-move {
    0% { right: -495px; opacity: 1;}
    100% { right: 0; opacity: 1;}
}


.check-point-switch {
    position: relative;
    width: 68px;
    height: 34px;

    background: #ececec;
    border-radius: 100px;
    transition: all 300ms ease-in-out;
}
.check-point-switch > div {
    position: absolute;
    width: 26px;
    height: 26px;
    left: 4px;
    top: 4px;
    transform: none;

    background: #ffffff;
    border-radius: 100px;
    transition: all 300ms ease-in-out;
}
.check-point-switch.is-selected {
    background: #2889fe;
}
.check-point-switch.is-selected > div {
    left: 38px;
}

.page-content{
    flex: 0 0 50px;
}
.dotBox{
    position: relative;
}
.dotBox .dot{
    position: absolute;
    right: -8px!important;
    top: -4px;
    background: #d50000;
    width: 20px;
    height: 20px;
    line-height: 18px;
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    color: #ffffff;
    border-radius: 50%;
}